<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input clearable class="filter-item" v-model="keyword" placeholder="请输入分类名称"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="handleFind">查找</el-button>
      <el-button type="success" icon="el-icon-edit" @click="handleAdd">添加</el-button>
    </div>
    <el-table :data="tableData" v-loading="Loading" style="width: 100%">
      <el-table-column type="selection"></el-table-column>

      <el-table-column label="序号" width="60" align="center">
        <template slot-scope="scope">
          <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>

      <el-table-column label="标题图" width="130" align="center">
        <template slot-scope="scope">
          <el-image v-if="scope.row.photoUrl!=null" :src="scope.row.photoUrl" :preview-src-list="[scope.row.photoUrl]" fit="cover" style="height: 70px;"></el-image>
        </template>
      </el-table-column>

      <el-table-column label="分类名" min-width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="图片选择器显示" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isShow == 1" type="success">是</el-tag>
          <el-tag v-if="scope.row.isShow == 0" type="warning">否</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" min-width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="更新时间" min-width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 1">
            <span>正常</span>
          </template>
          <template v-if="scope.row.status == 2">
            <span>推荐</span>
          </template>
          <template v-if="scope.row.status == 0">
            <span>已删除</span>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" min-width="315" align="center">
        <template slot-scope="scope">
          <el-button @click="handleManager(scope.row)" type="success" size="small">图片列表</el-button>
          <el-button @click="handleStick(scope.row)" type="warning" size="small">置顶</el-button>
          <el-button @click="handleEdit(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block">
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :close-on-click-modal='false' :visible.sync="dialogFormVisible" :before-close="handleDialogClose" v-if="dialogFormVisible" width="600px">
      <el-form :model="form" :rules="rules" ref="form" label-width="60px">
        <el-form-item label="封面">
          <div class="imgBody" v-if="form.photoList" @mouseover="icon = true" @mouseout="icon = false">
            <el-button @click="deletePhoto()" v-show="icon" size="mini" class="inputClass" icon="el-icon-close" circle></el-button>
            <el-image :src="VUE_APP_IMAGE_URL + form.photoList[0]" fit="cover" style=" width: 195px;height: 105px;"></el-image>
          </div>

          <div v-else class="uploadImgBody" @click="choosePhoto">
            <el-tooltip class="item" effect="light" content="首次创建图片分类，可以先不设置封面，待到有图片时在设置即可" placement="right-end">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-tooltip>
          </div>
        </el-form-item>

        <el-form-item label="标题" prop="name">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" :min="0" :max="9999" label="排序"></el-input-number>
        </el-form-item>

        <el-form-item label="可选择" prop="isShow">
          <el-radio-group v-model="form.isShow" size="small">
            <el-radio-button label="1" border>是</el-radio-button>
            <el-radio-button label="0" border>否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose()">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>

    <ChoosePhoto @choose_data="getChooseData" @cancelModel="cancelModel" :photoVisible="photoVisible" :limit="1"></ChoosePhoto>
  </div>
</template>
<script>
import {
  getPictureSortList,
  stickPictureSort,
  addPictureSort,
  editPictureSort,
  deletePictureSort
} from "@/api/pictureSort";
import ChoosePhoto from "../../components/ChoosePhoto";
export default {
  components: {
    ChoosePhoto,
  },
  data() {
    return {
      Loading: true,
      VUE_APP_IMAGE_URL: process.env.VUE_APP_IMAGE_URL,
      tableData: [],
      currentPage: 1,
      total: null,
      pageSize: 10,
      keyword: "",
      formLabelWidth: "120px", //弹框的label
      icon: false, //控制删除图标的显示
      title: "增加分类",
      isEditForm: false,
      dialogFormVisible: false,
      photoVisible: false,
      form: {
        uid: null,
        name: null,
        isShow: 1,
        fileUid: null,
        photoList: null,
        sort: 0,
      },
      rules: {
        name: [
          { required: true, message: "标题不能为空", trigger: "blur" },
          { min: 1, max: 20, message: "长度在1到20个字符" },
        ],
        sort: [
          { required: true, message: "排序字段不能为空", trigger: "blur" },
          { pattern: /^[0-9]\d*$/, message: "排序字段只能为自然数" },
        ],
      },
    };
  },
  created() {
    // this.pictureSortList();
  },
  methods: {
    pictureSortList() {
      this.Loading = true;
      var params = {};
      params.keyword = this.keyword;
      params.pageSize = this.pageSize;
      params.currentPage = this.currentPage;
      getPictureSortList(params).then((response) => {
        this.tableData = response.data.records;
        this.currentPage = response.data.current;
        this.pageSize = response.data.size;
        this.total = response.data.total;
        this.Loading = false;
      });
    },
    handleFind: function () {
      this.pictureSortList();
    },
    handleAdd() {
      this.title = "增加分类";
      this.dialogFormVisible = true;
      this.isEditForm = false;
    },
    handleEdit(row) {
      this.title = "编辑分类";
      this.dialogFormVisible = true;
      this.isEditForm = true;
      this.form = Object.assign(this.form, row);
    },
    handleDelete(row) {
      this.$confirm("此操作将会把分类下全部图片删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {};
          params.uid = row.uid
          this.$store.dispatch('app/setLoading', true);
          deletePictureSort(params).then(response => {
              this.$message({
                type: "success",
                message: response.data
              });
            this.pictureSortList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isEditForm) {
            this.$store.dispatch('app/setLoading', true);
            editPictureSort(this.form).then((response) => {
              this.$message({
                type: "success",
                message: response.data,
              });
              this.handleDialogClose();
              this.pictureSortList();
            });
          } else {
            this.$store.dispatch('app/setLoading', true);
            addPictureSort(this.form).then((response) => {
                this.$message({
                  type: "success",
                  message: response.data,
                });
              this.handleDialogClose();
              this.pictureSortList();
            });
          }
        }
      });
    },
    handleManager(row) {
      var uid = row.uid;
      this.$router.push({
        path: "picture",
        query: { pictureSortUid: uid },
      });
    },
    handleStick(row) {
      this.$confirm("此操作将会把该分类放到首位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {};
          params.uid = row.uid;
          this.$store.dispatch('app/setLoading', true);
          stickPictureSort(params).then((response) => {
              this.pictureSortList();
              this.$message({
                type: "success",
                message: response.data,
              });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消置顶",
          });
        });
    },
    //改变页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.pictureSortList();
    },
    handleDialogClose() {
      this.form = {
        uid: null,
        name: null,
        isShow: 1,
        fileUid: null,
        photoList: null,
        sort: 0,
      };
      this.dialogFormVisible = false;
    },
    //弹出选择图片框
    choosePhoto() {
      this.photoVisible = true;
    },
    //关闭动态图片选择框
    cancelModel() {
      this.photoVisible = false;
    },
    getChooseData(data) {
      this.photoVisible = false;
      this.checkedFileUids = data.checkedFileUids;
      this.checkedPictureUrlList = data.checkedPictureUrlList;
      if (this.checkedPictureUrlList.length >= 1) {
        this.form.fileUid = this.checkedFileUids; //字符串逗号分隔
        this.form.photoList = this.checkedPictureUrlList; //数组
      }
    },
    deletePhoto() {
      this.form.photoList = null;
      this.form.fileUid = "";
    },
  },
};
</script>

<style>
.imgBody {
  width: 195px;
  height: 105px;
  border: solid 2px #ffffff;
  float: left;
  position: relative;
}
.inputClass {
  position: absolute;
  z-index: 999;
  text-align: center;
}

.uploadImgBody {
  width: 195px;
  height: 105px;
  border: dashed 1px #c0c0c0;
  float: left;
  position: relative;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 195px;
  height: 105px;
  line-height: 105px;
  text-align: center;
}
</style>
